import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { AblumWrapper } from './style'
import HotAlbum from './c-pages/hot-album'
import TopAlbum from './c-pages/top-album'
import { useAppDispatch } from '@/store'
import { fetchHotAlbumsAction, fetchTopAlbumsAction } from './store/album'




interface IProps {
  children?: ReactNode
}

const Album: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchHotAlbumsAction())
    dispatch(fetchTopAlbumsAction({ limit: 30, offset: 0 }))
  }, [dispatch])

  return (
    <AblumWrapper className='wrap-v2'>
      <HotAlbum />
      <TopAlbum />
    </AblumWrapper>
  )
}

export default memo(Album)
